<template>
  <div class='maxSwiper'>
    <!-- swiper -->
    <div class="swiper">
      <swiper :options="swiperOption" v-if="message.length!=0">
        <swiper-slide v-for="(img,index) in message" :key="index">
          <van-image
            width="100%"
            height="100%"
            fit="fill"
            v-lazy="host+img.image"
            :src="host+img.image"
          >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          </van-image>
          <!-- <div class="maxSwiper-img">
          </div> -->
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="swiper" v-else>
        <img src="../../../assets/images/maxSwiper.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import api from '../../../api/api.js'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Loading } from 'vant';
  export default{
    props:{
      message:{
        type:Array
      }
    },
    data(){
      return{
        loading: true,
        host: api.host,
        val: 5,
        swiperOption: {
          //slidesPerView: 1, //同时显示swiper数量
          effect: 'fade', //切换渐变
          //spaceBetween: 30, //slide之间的距离（单位px)
          autoplay: {
            delay: 2500,
            disableOnInteraction: false  //用户操作后是否不执行autoplay
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true //点击分页器切换swiper
          },
        }
      }
    },
    created(){
  
    },
    methods:{

    },
    components: {
      swiper,
      swiperSlide,
      [Loading.name]:Loading,
    }
  }
</script>
<style>
  #app .maxSwiper .swiper-pagination-bullet-active{
    background-color: #fff;
  }
  #app .maxSwiper .swiper-pagination-bullet{
    background-color: #f1f1f1;
  }
</style>

<style scoped>
.maxSwiper{
  margin-top: 1rem;
  width: 100%;
  height: 4rem;
}
.swiper-container{
  height: 100%;
}
.maxSwiper-img{
  width: 100%;
  height: 100%;
}
.swiper{
  width: 100%;
  height: 4rem;
}
.swiper img{
  width: 100%;
  height: 100%;
}
</style>
